<template>
  <!-- <div> -->
    <el-header style="text-align: right; font-size: 12px width: 100%;">
        <el-dropdown>    
            <el-col :span="12">
              <div class="demo-basic--circle">
                <div class="block"><el-avatar :size="50" :src="photo" style="vertical-align: middle;"></el-avatar></div>
              </div>
            </el-col>
            &emsp;
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button @click="login">登录</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button @click="logout">登出</el-button>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <span>{{name}}</span>
    </el-header>
  <!-- </div> -->
</template>

<script>export default {
    name:'BaseHead',
    data(){
      return{
        name: '未登录',
        photo: '',
      }
    },
    methods:{
      logout(){
        localStorage.removeItem('managerData');
        this.name='未登录';
        this.photo='';
        this.$router.replace({
          name:'managerLogin',
        })
        alert('登出成功');
      },
      login(){
        this.$router.replace({
          name:'managerLogin',
        })
      },
      loginChange(val){
        this.name=val.name;
        this.photo=val.profilePhoto;
      }
    },
    mounted(){
      this.$bus.$on('manager',this.loginChange);
      if(localStorage.getItem('managerData')!==null){
        this.name=JSON.parse(localStorage.getItem('managerData')).name;
        this.photo=JSON.parse(localStorage.getItem('managerData')).profilePhoto;
      }
    },
    beforeDestroy(){
      this.$bus.$off('manager');
    }
}
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
</style>